<template>
  <div class="list-body">

    <div class="left">
      <div class="calendar-border" >
        <el-calendar v-model="month" >
          <div  slot="dateCell" slot-scope="slot" @click="ModifyDate(slot)">
            {{ slot.data.day.split('-')[2] }}
          </div>
        </el-calendar>
      </div>
    </div>

    <div class="right">

      <div class="filter">
        <div class="filter-position">
          <el-select v-model="position">
            <el-option
                v-for="item in positions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="filter-tags">

          <el-select
              v-model="value"
              multiple
              filterable
              remote
              allow-create
              :remote-method="creatTag"

              placeholder="全部类别"
              @change="ModifyTopics($event)">
              <el-option
                  v-for="item in tags"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
          </el-select>





        </div>
        <div class="filter-reset">
          <span @click="reset">重置条件</span>
        </div>
      </div>

      <div class="list">
        <div class="activity" v-for="(item) in $store.state.event_list" :key="item.id" @click="toDetail">
          <el-divider></el-divider>
          <el-image
              style="width: 170px; height: 90px"
              :src="item.cover_url"
              fit="fill"></el-image>
          <span class="time">{{item.date}}</span><br />
          <span class="title">{{item.title}}</span><br />
          <span class="tag">{{item.topics.join("·")}}</span><br />
          <span class="city">{{item.city}}</span>
          <span class="participant">参加人数：{{item.going}}人</span>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
export default {
    name:'ListBody',
    data() {
        return {
          month: new Date(),
          formatedToday:'',

          positions: [{
              value: '选项1',
              label: '全部状态'
            }, {
              value: '选项2',
              label: '编辑中'
            }, {
              value: '选项3',
              label: '已发布'
            }, {
              value: '选项4',
              label: '已过期'
            }],
          position: '全部状态',

          tags: this.$store.state.tags,
          value: [],



          // event_list:[{
          //   id:'001',
          //   cover_url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          //   date:'2022年·11月27日',
          //   title:'我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题',
          //   topics:["医疗器材","半导体"],
          //   city:'苏州',
          //   going:'25'
          // },
          // {
          //   id:'002',
          //   cover_url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          //   date:'2022年·11月27日',
          //   title:'我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题',
          //   topics:["医疗器材","半导体"],
          //   city:'苏州',
          //   going:'25'
          // }
          // ]
        }
    },
  methods: {
    ModifyDate(slot) {
      let formatedToday = slot.data.day.split('-')[0] + '年·' + slot.data.day.split('-')[1] + '月' + slot.data.day.split('-')[2] + '日'
      this.formatedToday = formatedToday
      this.$store.state.date = formatedToday

      // for(let i of this.$store.state.event_list){
      //   console.log(i,1)
      //   // 做各种判断之前需要先发送请求获取最新的活动列表数据，用来防止多次操作输入框（还没写）
      //
      //   // if(!i.title.includes(this.keyword)){
      //   //   this.$store.dispatch('remove',i)
      //   // }
      //
      //   // if(!i.city.includes(this.city)){
      //   //
      //   //   this.$store.dispatch('remove',i)
      //   // }
      //
      //   if(i.date!==formatedToday){
      //     console.log(i,2)
      //     this.$store.dispatch('remove',i)
      //   }
      // }
      // this.$store.commit('MODIFY_DATE',formatedToday)

      // 先调用search，保证换日期时，保留关键字和城市的查询
      this.$store.dispatch('search')


      // this.$store.commit('SEARCH_BY_DATE',this,formatedToday)

    },
    ModifyTopics($event){
      // console.log(this.value)
      console.log($event)
      this.$store.state.topics = this.value
      this.$store.dispatch('search')
      // console.log(this.$store.state.event_list[1].topics)
      // console.log(this.value.sort().toString()===this.$store.state.event_list[1].topics.sort().toString())
    },
    reset(){
      location.reload()
    },
    creatTag(input){

      // this.$store.state.tags.push({
      //   value: input,
      //   label: input,
      // })
      let vc = this
      document.onkeydown=function(event){
        if(event.keyCode==13){
          vc.$store.state.tags.push({
            value: input,
            label: input,
          })

        }
      }

    },
    toDetail(){

    },
  },

}
</script>

<style scoped>
.list-body{
  width:100%;
  height:84%;
  position:fixed;
  border: 1px solid #BBBBBB;

  margin-top: 4.2%;
}

.left{
  /*方便观察分区，画出分区边界*/
  border: 1px solid #BBBBBB;

  /*设定分区大小和位置*/
  width: 40%;
  height: 100%;
  position: absolute;
}
.right{
  /*方便观察分区，画出分区边界*/
  border: 1px solid #BBBBBB;

  /*设定分区大小和位置*/
  width: 60%;
  height: 100%;
  float: right;
}
.calendar-border{
  /*设定边界和阴影*/
  border: 1px solid #BBBBBB;

  /*设定整体位置和大小*/
  width: 80%;
  height: 70%;
  position: absolute;
  margin-top: 10%;
  margin-left: 10%;


}

.el-calendar {
  background-color: #fff;
  /*width:28%;*/

  /*!*height属性不影响日历中的内容*!*/
  /*height: 80%;*/

  position:absolute;
  /*margin-top: 8%;*/
}

::v-deep .el-calendar__title {
  color: #008294;
  align-self: center;
  font-size:20px;
  font-weight: 600;

}

::v-deep .el-calendar .el-calendar__body{
  /*!*方便观察分区，画出分区边界*!*/
  /*border: 1px solid red;*/

  /*!*修改高度没用，但是修改背景颜色有用*!*/
  /*height: 40%;*/
  /*background-color: #008294;*/

}

::v-deep .el-calendar-table{
  /*!*方便观察分区，画出分区边界*!*/
  /*border: 1px solid red;*/

  /*!*修改高度没用，但是修改背景颜色有用*!*/
  /*height: 40%;*/
  /*background-color: #008294;*/
}

::v-deep .el-calendar-day{
    height:4.4em;
}

.filter{
  /*!*方便观察分区，画出分区边界*!*/
  /*border: 1px solid red;*/

  margin-top: 5%;
  margin-left: 10%;
}

.filter-position{
  float: left;
}
.filter-tags{
  float: left;
  margin-left: -5%;
}

.filter-reset{
  /*!*方便观察分区，画出分区边界*!*/
  /*border: 1px solid red;*/

  font-size: 16px;
  color: #008294;

  float: right;
  margin-right: 10%;
  margin-top: 1.3%;
}

::v-deep .el-input__inner{
  border-radius: 12px 12px 12px 12px;

  color: #BBBBBB;
  font-weight: 600;
  width: 50%;
}

/*调整下拉箭头位置*/
::v-deep .el-icon-arrow-up{
  margin-left: -1000%;
}

.list{
  /*设定边界和阴影*/
  border: 1px solid #BBBBBB;

  width: 50%;
  height:80%;
  position: absolute;

  margin-top: 3%;
  margin-left: 5%;
}

.activity{
  position: relative;
  margin-top: 5%;
}

.el-divider--horizontal{
  width:95%;
  margin-left: 2.5%;
}



.el-image{
  margin-left: 3%;
  float: left;
}

.time{
  color: #877457;

  font-weight: 600;

  margin-left: 3%;
}

.title{
  font-weight: 600;

  position: absolute;
  margin-left: 3%;
  margin-top: 0.2%;

}

.tag{
  font-weight: 600;

  color: #BEBEBE;

  position: absolute;
  margin-left: 3%;
  margin-top: 0.6%;
}

.city{
  font-weight: 600;

  color: #BEBEBE;

  position: absolute;
  margin-left: 3%;
  margin-top: 1%;
}

.participant{
  font-weight: 600;

  color: #BEBEBE;


  float: right;
  margin-right: 10%;
  margin-top: 2.1%;
}
</style>
